<!-----------绑定手机号页面------------->
<template>
  <div>
    <topheader :toptitle="toptitle"/>
    <div class="wrapper mb0">
      <div class="wrapper-inner">    
      	<img class="xy-logo" src="static/img/xy-logo.png"/>
				<div class="go-login phonebind">
					<p class="bind-tip thanks tc">为了您的账号安全，建议您尽快绑定手机哦~<br/>谢谢配合~</p>
					<div class="login-item yk-username">
						<input type="text" name="userphone" id="userPhone" v-model:value="userphone" placeholder="请输入手机号"/>
					</div>
					<div class="login-item yk-code">
            <input type="text" v-model:value="uservalidatecode" id="ykcode" placeholder="请输入验证码">
            <span class="v-code" @click="validateCode">{{validateMsg}}</span>
          </div>
					<div class="btn btn-normalsize btn-bluebg btn-ykbind" @click="bindMobile">确定</div>
				</div>
      </div>
    </div>
  </div> 
</template>

<script>
  import Vue from "vue"
  import topheader from "@/components/topheader"
  import Message from "iview/src/components/message"
  import apiConfig from "../config/api.js"

  Vue.prototype.$Message = Message
  export default {
    name: "bindphone",
    components: {
      "topheader": topheader
    },
    data () {
      return {
        toptitle: "绑定手机",
        userInfo :{
          uid : ""
        },
        validateMsg: "获取验证码",
        isValidateing: false,
        userphone: "",
        uservalidatecode: ""
      }
    },
    created () {
      this.$http.get(apiConfig.app.course.yklist)
        .then((data) => {
          this.yklist = data.body
        })
    },
    methods: {
      bindMobile: function () {
      	if (this.userphone === "") {
          this.$Message.warning("请输入手机号")
          return
        } else if (this.userphone !=="" && !/^0?1[3|4|5|8|7|9][0-9]\d{8}$/.test(this.userphone)) {
          this.$Message.warning("请输入正确的手机号")
          return
        } else if (this.uservalidatecode === "") {
          this.$Message.warning("请输入验证码")
          return
        } else {
					//请求参数
					let params = {
            appid: userInfoKit.appid,
            token: userInfoKit.getUserInfo().token,
            mobile: this.userphone,
            code:	this.uservalidatecode           
          }
          // 请求正式用户绑定手机号接口
          this.$http({
              method: "GET",
              url: apiConfig.app.user.officalBindMobile,
              params: params,
              emulateJSON: true
            }).then(function (resp) {
            if (resp.body.code == "200") {
            	//绑定手机号成功后调用获取用户信息接口
							let params = {
			            appid: userInfoKit.appid,
			            token: userInfoKit.getUserInfo().token
		        	}
			        // 请求获取用户信息接口
			        this.$http({
			              method: "GET",
			              url: apiConfig.app.user.userInfor,
			              params: params,
			              emulateJSON: true
		            }).then(function (resp) {
			            if (resp.body.code == "200") {
			              //保存用户信息
			              userInfoKit.save(resp.body)
			              //提交成功后跳转到手机号绑定成功页面
			              this.$router.push("/bindphonesuccess")
			            } else {
			              this.$Message.warning(resp.body.msg)
			            }
			        })
            } else {
              this.$Message.warning(resp.body.msg)
            }
          })
					
        }
      },
      validateCode: function () {
        if (this.isValidateing) {
          return false
        }
        var _this = this
        if (this.userphone === "") {
          this.$Message.warning("请输入手机号")
          return
        } else if (this.userphone !== "" && !/^0?1[3|4|5|8|7|9][0-9]\d{8}$/.test(this.userphone)) {
          this.$Message.warning("请输入正确的手机号")
          return
        } else {
        	//请求参数
          let params = {
            appid: userInfoKit.appid,
            token: userInfoKit.getUserInfo().token,
            mobile: this.userphone,
            type: "bind"
          }
          //请求绑定并登录获取验证码接口
          this.$http(
            {
              method: "GET",
              url: apiConfig.app.user.verifyCode,
              params: params,
              emulateJSON: true
            }).then(function (resp) {
              if (resp.body.code == "200") {
                this.isValidateing = true
                var t = 60
                var countDown = function () {
                  if (t > 0) {
                    _this.validateMsg = "倒计时" + t-- + "s"
                    setTimeout(countDown, 1000)
                  } else {
                    _this.validateMsg = "重新发送"
                    _this.isValidateing = false
                  }
                }
                countDown()
              } else {
                this.$Message.warning(resp.body.msg)
              }
          })
        }
      }
    }
  }
</script>
